<template>
	<video :initial-time="initialTime" id="videoId" v-if="videoplay" object-fit="contain" :src="videoUrl" autoplay @timeupdate="timeUpdate" @error="videoError" @ended="videoEnd" @fullscreenchange="playerFullScreen">
		<image v-if="!verticalScreen" @click="back" class="back_img" :src='STATIC_URL+"90.png"' mode="aspectFill"></image>
	</video>
	
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				videoplay: false,
				videoInfo: {
					aid: "",
					url: "",
					time: ""
				},  // 视频信息
				initialTime: 0,
				videoUrl: "",
				second: 0,
				verticalScreen: false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.videoContext = uni.createVideoContext('videoId', this);
			this.videoInfo = global.videoInfo;
			this.initialTime = this.videoInfo.time;
			this.videoUrl = this.videoInfo.url;
			
			// this.videoContext.requestFullScreen({
			// 	direction: 90
			// }); //direction: 90  这个是控制全屏的时候视屏旋转多少度
			this.videoContext.play();
			this.videoplay = true; // 显示播放盒子
		},
		onUnload() {
			this.saveTime();
		},
		onReady() {},
		onShow(options) {},
		onPullDownRefresh() {},
		onReachBottom(e) {},
		onPageScroll(e) {},
		methods: {
			back() {
				uni.navigateBack()
			},
			videoError() {
				this.$message.info('视频播放失败，请重试')
				setTimeout(() => {
					this.back();
				}, 800)
			},
			timeUpdate(e) {
				this.second = Math.round(e.detail.currentTime);
			},
			
			videoEnd() {
				this.back();
				this.saveTime();
			},
			// 监听视频全屏状态
			playerFullScreen(e) {
				if (e.detail.fullScreen) { //全屏
					this.verticalScreen = true;
				} else { //非全屏			
					this.verticalScreen = false;
				}
			},
			saveTime() {
				this.$api.post(global.apiUrls.post65a8998e1c975, {
					aid: this.videoInfo.aid,
					second: this.second
				}).then(res => {
					console.log(res);
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	video {
		height: 100vh;
		width: 100vw;
	}
	.back_img {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 66rpx;
		left: 36rpx;
	}

	page {
		background: rgba(0, 0, 0, 0.3);
		position: relative;
	}
</style>